import { StyleSheet, View, Text, Pressable, StatusBar } from "react-native";
import Clipboard from "@react-native-clipboard/clipboard";
import FastImage from "react-native-fast-image";
import { __getThumbUrl } from "../common/utils";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import Toast from "react-native-toast-message";
import { useSafeAreaInsets } from "react-native-safe-area-context";

export const HEADER_HEIGHT = 200;

type ProfileHeaderProps = {
  user: any;
  height?: number;
};
export const ProfileHeader = ({
  height = HEADER_HEIGHT,
  user,
}: ProfileHeaderProps) => {

  const safeAreaInsets = useSafeAreaInsets(); 
  const copyToClipboard = () => {
    Clipboard.setString(user.uid);
    Toast.show({
      text1: "用户ID已复制",
      topOffset: safeAreaInsets.top, 
    });
  };

  return (
    <View style={[styles.contentView, { height }]}>
      <FastImage
        style={styles.avatar}
        source={{ uri: __getThumbUrl(user.avatar, 200) }}
      ></FastImage>
      <Text style={styles.nickname}>{user.nickname}</Text>
      <Pressable onPress={copyToClipboard}>
        <View
          style={{ flexDirection: "row", alignItems: "center", marginTop: 10 }}
        >
          <Text style={styles.uid}>ID:{user.uid}</Text>
          <Icon
            name={"content-copy"}
            size={15}
            color="rgba(0,0,0,.5)"
            style={{ marginLeft: 2 }}
          />
        </View>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  contentView: {
    backgroundColor: "white",
    alignItems: "center",
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 40,
    resizeMode: "cover",
    marginTop: 50,
  },
  nickname: {
    color: "black",
    fontSize: 20,
    textAlign: "center",
    marginTop: 10,
  },
  uid: {
    color: "rgba(0,0,0,.5)",
    fontSize: 15,
    textAlign: "center",
  },
});
